<!-- 账号密码登录 -->

<template>
	<LoginTitle v-if="getShow"></LoginTitle>
	<el-form
		v-if="getShow"
		ref="ruleFormRef"
		:model="ruleForm"
		status-icon
		:rules="rules"
		class="enter-x"
	>
		<el-form-item :label="$t('sys.login.username')" prop="username">
			<el-input v-model="ruleForm.username" />
		</el-form-item>
		<el-form-item :label="$t('sys.login.password')" prop="password">
			<el-input
				v-model="ruleForm.password"
				type="password"
				autocomplete="off"
				style="width: 300px"
			/>
		</el-form-item>
		<el-row>
			<el-col :span="12">
				<el-form-item prop="rememberMe">
					<el-checkbox v-model="ruleForm.rememberMe">{{
						$t("sys.login.rememberme")
					}}</el-checkbox>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item prop="forgetPassword" style="justify-content: flex-end">
					<el-link type="primary">{{ $t("sys.login.forgetPassword") }}</el-link>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item prop="forgetPassword" style="justify-content: flex-end">
					<el-button
						type="primary"
						@click="setLoginState(LoginStateEnum.REGISTER)"
						style="width: 100%"
						>{{ $t("sys.login.register") }}</el-button
					>
				</el-form-item>
			</el-col>
		</el-row>

		<el-form-item>
			<el-button type="primary" @click="submitForm" style="width: 100%">{{
				$t("sys.login.sign")
			}}</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup>
import { ref, computed, unref, reactive, onMounted } from "vue";
import LoginTitle from "./loginTitle.vue";
import { i18n } from "@/locales/setupI18n";

import { useLoginState, LoginStateEnum } from "./useLogin";

const { setLoginState, getLoginState } = useLoginState();
import { useUser } from "@/store/modules/user";
const userStore = useUser();
const ruleFormRef = ref();
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);

const ruleForm = reactive({
	username: "admin",
	password: ""
});
const rules = reactive({
	username: [
		{
			required: true,
			message: "‘请输入账号",
			trigger: "blur"
		}
	],
	password: [
		{
			required: true,
			message: "请输入密码",
			trigger: "blur"
		}
	]
});

/**
 * 登录
 */
const submitForm = () => {
	ruleFormRef.value.validate((valid, fields) => {
		if (valid) {
			console.log("submit!");
			userStore.login(ruleForm);
		} else {
			console.log("error submit!", fields);
		}
	});
};
</script>

<style scoped lang="less"></style>
